<template>
  <div class="flex-1">
    <!-- title -->
    <div
      class="p-[0_20px] h-50px flex items-center b-b b-b-solid b-b-[#e1e2e5] box-border"
    >
      <span class="inline-block w4px h13px bg-#00a1d6 m-r-5px"></span>
      <span class="c-#00a1d6 text-14px">会员积分</span>
    </div>

    <!-- label-item -->
    <div
      class="p-[0_20px] h-48px flex items-center b-b b-b-solid b-b-[#e1e2e5] box-border"
    >
      <div
        class="w-56px h-48px leading-48px c-#000 text-14px box-border cursor-pointer text-center relative"
        v-for="(item, index) in tabs"
        :class="[
          item.active && '!c-#00a1d6 b-b b-b-solid b-b-#00a1d6',
          index > 0 && 'm-l-38px',
        ]"
        @click="tabs.forEach((tab, i) => (tab.active = i === index))"
      >
        {{ item.label }}
        <div
          class="w-0 h-0 b-l-3 b-r-3 b-t-0 b-b-3 b-solid b-l-transparent b-r-transparent b-b-#00a1d6 absolute left-50% translate-x-[-50%] bottom-0px"
          v-if="item.active"
        ></div>
      </div>
    </div>

    <!-- label-content -> 首页 -->
    <div v-if="tabs[0].active">

      <!-- 会员积分 -->
      <div
        class="h-145px p-[0_20px] m-t-40px box-border bg-[url('/src/assets/img/userCenter/score.png')] bg-no-repeat bg-cover text-center leading-118px"
      >
        <span class="text-30px">会员积分余额</span>
        <span class="text-30px c-#00a1d6 m-l-5px">0</span>
      </div>

      <!-- 兑换大会员 -->
      <div class="m-t-30px p-[0_20px]">
        <div class="text-20px">兑换大会员</div>
        <div class="m-t-20px flex justify-between">
          <div class="w-380px h-140px flex items-center justify-around b b-solid b-#d1d1d1 b-rd-4px shadow-[0_2px_4px_rgba(0,0,0,0.14)]">
            <div>
              <p class="text-24px">大会员</p>
              <p class="text-14px c-#99a2aa"><span class="c-#00a1d6 text-18px">1250</span> 积分/月</p>
            </div>
            <div class="w-118px h-54px bg-#00a1d6 leading-54px text-center c-#fff text-16px cursor-pointer hover:bg-[rgb(0_161_214_/_0.8)]">
              立即兑换
            </div>
          </div>

          <div class="w-380px h-140px flex items-center justify-around b b-solid b-#d1d1d1 b-rd-4px shadow-[0_2px_4px_rgba(0,0,0,0.14)]">
            <div>
              <p class="text-24px">年度大会员</p>
              <p class="text-14px c-#99a2aa"><span class="c-#00a1d6 text-18px">11650</span> 积分/月</p>
            </div>
            <div class="w-118px h-54px bg-#00a1d6 leading-54px text-center c-#fff text-16px cursor-pointer hover:bg-[rgb(0_161_214_/_0.8)]">
              立即兑换
            </div>
          </div>
        </div>
      </div>

      <!-- 头像挂件兑换 -->
      <div class="p-[0_20px]">

        <div class="m-[20px_0] text-20px">
          头像挂件兑换
        </div>

        <div class="flex justify-between p-b-30px b-b b-b-solid b-b-#e5e9ef box-border">

          <div class="w-158px h-158px b b-solid b-#e5e9ef b-rd-4px hover:b-#00a1d6 cursor-pointer flex flex-col items-center justify-center gap-y-10px">
            <img class="w-84px h-84px" src="../../../assets/img/home/data-head.jpg" alt="">
            <p>文豪</p>
          </div>

          <div class="w-158px h-158px b b-solid b-#e5e9ef b-rd-4px hover:b-#00a1d6 cursor-pointer flex flex-col items-center justify-center gap-y-10px">
            <img class="w-84px h-84px" src="../../../assets/img/home/data-head.jpg" alt="">
            <p>文豪</p>
          </div>

          <div class="w-158px h-158px b b-solid b-#e5e9ef b-rd-4px hover:b-#00a1d6 cursor-pointer flex flex-col items-center justify-center gap-y-10px">
            <img class="w-84px h-84px" src="../../../assets/img/home/data-head.jpg" alt="">
            <p>文豪</p>
          </div>

          <div class="w-158px h-158px b b-solid b-#e5e9ef b-rd-4px hover:b-#00a1d6 cursor-pointer flex flex-col items-center justify-center gap-y-10px">
            <img class="w-84px h-84px" src="../../../assets/img/home/data-head.jpg" alt="">
            <p>文豪</p>
          </div>

        </div>

      </div>

      <!-- 如何获得会员积分 -->
      <div class="p-[0_20px] p-b-[30px]">

        <div class="m-[30px_0] text-20px">
          如何获得会员积分
        </div>

        <div class="flex justify-around">
          <img class="w-130px h-100px" :src="step1" alt="step1">
          <img class="w-130px h-100px" :src="step2" alt="step2">
          <img class="w-130px h-100px" :src="step3" alt="step3">
          <img class="w-130px h-100px" :src="step4" alt="step4">
        </div>

        <div class="b-b b-b-solid b-b-#e5e9ef m-[10px_0] box-border relative">
          <div class="w-9px h-9px b-8px b-solid b-rd-full b-#fff absolute top-[-12px] m-[0_13px] bg-#e5e9ef left-68px"></div>
          <div class="w-9px h-9px b-8px b-solid b-rd-full b-#fff absolute top-[-12px] m-[0_13px] bg-#e5e9ef left-267px"></div>
          <div class="w-9px h-9px b-8px b-solid b-rd-full b-#fff absolute top-[-12px] m-[0_13px] bg-#e5e9ef right-274px"></div>
          <div class="w-9px h-9px b-8px b-solid b-rd-full b-#fff absolute top-[-12px] m-[0_13px] bg-#e5e9ef right-76px"></div>
        </div>

        <div class="flex justify-around">
          <div class="w-130px h-100px text-center text-14px">
            <p>在bilibili番剧区</p>
            <p>找到可承包的番剧</p>
            <div class="w-74px h-28px leading-28px m-[0_auto] m-t-10px c-#00a1d6 b-rd-4px b b-solid b-#00a1d6 cursor-pointer hover:bg-#00a1d6 hover:c-#fff">去找番剧</div>
          </div>
          <div class="w-130px h-100px text-center text-14px">
            <p>在bilibili番剧区</p>
            <p>找到可承包的番剧</p>
          </div>
          <div class="w-130px h-100px text-center text-14px">
            <p>在bilibili番剧区</p>
            <p>找到可承包的番剧</p>
          </div>
          <div class="w-130px h-100px text-center text-14px">
            <p>在bilibili番剧区</p>
            <p>找到可承包的番剧</p>
          </div>
        </div>
        

      </div>

      <!-- tip -->
       <p class="p-[0_20px] c-#717171 text-12px">小贴士：1.承包中消费B币劵的部分不获得积分 2.后续将推出更多获取积分的途径哦</p>

       <!-- bottom-link -->
        <div class="m-t-20px b-t b-t-solid b-t-#e5e9ef text-12px text-12px c-#00a1d6 flex items-center justify-center p-[10px_12px] gap-x-20px">
          <span class="cursor-pointer hover:c-#f25d8e">大会员帮助 ></span>
          <span class="cursor-pointer hover:c-#f25d8e">大会员用户协议 ></span>
        </div>
    </div>

    <!-- label-content -> 积分记录 -->
    <div class="p20px" v-if="tabs[1].active">
      <div class="text-20px">会员积分记录</div>
      <el-table class="m-t-20px" :data="tableData" empty-text="没有积分记录哦( ゜- ゜)" :header-cell-style="{'background-color': '#e5e9ef'}" border>
        <el-table-column prop="date" label="时间" align="center" />
        <el-table-column prop="name" label="变化" align="center" />
        <el-table-column prop="name" label="原因" align="center" />
        <el-table-column prop="name" label="变化" align="center" />
        <el-table-column prop="name" label="备注" align="center" />
        <el-table-column prop="name" label="余额" align="center" />
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import step1 from "@/assets/img/userCenter/step1.png";
import step2 from "@/assets/img/userCenter/step2.png"; 
import step3 from "@/assets/img/userCenter/step3.png";
import step4 from "@/assets/img/userCenter/step4.png";

const tabs = ref([
  { label: "首页", active: true },
  { label: "积分记录", active: false },
]);
</script>

<style scoped></style>
